import { Button, Form, Modal, Space, Steps } from 'antd';
import { useEffect, useState } from 'react';
import { useMappingRelationContext } from '../../../contexts/MappingRelationContext';
import BaseTAT from './BaseTAT';
import FieldMatch from './FieldMatch';
import HierarchyTAT from './HierarchyTAT';

const { Step } = Steps;

const items = [
  { key: 1, title: '基本信息配置' },
  { key: 2, title: '层级匹配设置' },
  { key: 3, title: '字段匹配设置' }
];
const EditTAT = (props: any) => {
  const [form] = Form.useForm();
  const { visible, onClose, data } = props;
  const { saveHierachy, saveBase, hierachy } = useMappingRelationContext();
  // 字段匹配数据
  const [template, setTemplate] = useState<any>({});
  // 当前step
  const [current, setCurrent] = useState(0);
  useEffect(() => {
    setCurrent(0);
  }, [visible]);
  /**
   * @description: 关闭弹窗
   */
  const onCancel = () => {
    onClose();
    saveHierachy([]);
    // setCurrent(0);
    // setLevelList([]);
    // setFileList([]);
    // setCurrentUploaded(false);
    // setLatestRecord({});
  };
  /**
   * @description 步骤条，前进一步
   */
  const next = () => {
    if (current === 0) {
      form.submit();
    }
    // saveBase();
    // saveHierachy();
    setCurrent(current + 1);
  };
  /**
   * @description 步骤条，返回一步
   */
  const prev = () => {
    setCurrent(current - 1);
  };
  const onChange = (params: any) => {
    saveHierachy(params);
    console.log(params);
  };
  const onFinish = (value: any) => {
    saveBase(value);
    console.log('value', value);
  };
  return (
    <Modal
      title="档案类型与档案类型的映射关系"
      visible={visible}
      width={700}
      maskClosable={false}
      destroyOnClose
      onCancel={onCancel}
      footer={[
        <Button key="close" onClick={onCancel}>
          关闭
        </Button>,
        <>
          {current > 0 && (
            <Button key="prve" onClick={() => prev()}>
              上一步
            </Button>
          )}
        </>,
        <>
          {current < items.length - 1 && (
            <Button
              key="next"
              type="primary"
              onClick={() => {
                next();
              }}
            >
              下一步
            </Button>
          )}
        </>,
        <>
          {current === items.length - 1 && (
            <Button key="finish" type="primary" onClick={() => onCancel()}>
              完成
            </Button>
          )}
        </>
      ]}
    >
      <Space direction="vertical" size="large" style={{ width: '100%' }}>
        <Steps current={current}>
          {items.map((item) => (
            <Step key={item.key} title={item.title} />
          ))}
        </Steps>
        <Form
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 20 }}
          labelAlign="left"
          form={form}
          onFinish={onFinish}
        >
          {current === 0 && <BaseTAT />}
        </Form>
        {current === 1 && <HierarchyTAT onChange={onChange} />}
        {current === 2 && hierachy.length > 0 && (
          <FieldMatch updateTemplate={setTemplate} tplData={template} />
        )}
      </Space>
    </Modal>
  );
};
export default EditTAT;
